import React, { forwardRef, useEffect, useState, useRef } from 'react'
import { Card, Skeleton, Button, Alert, Menu } from "antd";
import { Link } from "react-router-dom"
import Lesson from "@/typings/lesson";
import { MenuOutlined } from "@ant-design/icons";
import './index.less';

interface Props {
  children?: any;
  lessons?: any;
  getLessons?: any;
  container?: any;
}

function LessonList(props: Props, lessonListRef: any) {
  //forceUpdate是模拟类组件的forceUpdate方法。名字xxx随意就行，，函数组件没有forceUpdate方法，我又想让组件强行刷新
  //const [_, forceUpdate] = useState(0);   //模拟forceUpdate的事件
  const [_, forceUpdate] = useState(0);
  const h2TitleRef = useRef(null);
  const cardRef = useRef(null);
  useEffect(() => {
    console.log(props, 'props=》LessonList数据多少？', lessonListRef, 'lessonListRef是什么？')

    if (props.lessons && props.lessons.list.length == 0) {
      props.getLessons();
      console.log(h2TitleRef, 'h2TitleRef=>1');
    }
    // 就是回调，里边赋值，外部调用这个current函数
    // _ref.current = () => forceUpdate(x => x + 1);// 巧妙的设置列表组件的current就是强制调用setState的forceUpdate方法，等同于lessonList.current=这个方法
    // 每次事件强制刷新 走到useEffect里边每次计算渲染的索引然后渲染3张卡片
    // container.current是中间整体外面容器的高度。除去头部底部的高度
    lessonListRef.current = () => forceUpdate((x) => x + 1);
    console.log(h2TitleRef, 'h2TitleRef=>2');

  }, []);

  // 核心找到起始卡片的高度，然后他是向上卷曲的高度除以卡片的高度向下取整就是开始渲染的索引。往下加2就是渲染的卡片张数。
  //let start = 0;//核心，大概屏幕高度除以每张高度+1===开始真正渲染的起始索引 从它开始向下渲染3条数据。除此以外的卡片都用空的DIV撑开发
  // 根子体大小
  console.log(props.lessons, 'props.lessons');
  //核心要计算出起始的渲染的元素的索引 ，之前的不有渲染，只渲染起始+一页的数据，一页的数据之后也不渲染
  let start = 0;//起始的索引
  let rem = parseInt(document.documentElement.style.fontSize); //1个rem的像素
  console.log("rem", rem); //75
  console.log(rem, 'rem=动态获取rem是多少？？？'); //75
  if (props.container.current) { //说明div已经 homeContainer 已经有了
    //  // 获取父容器向上卷曲的高度
    let scrollTop = props.container.current.scrollTop;//获得向上卷去的高度
    console.log(scrollTop, '获得向上卷去的高度scrollTop是多少？？？', 6.934 * rem, ' 6.934 * rem是课程列表上面的内容的高度'); //37px
    //7 * rem是课程列表上面的内容的高度 代表轮播图和全部课程的高度。
    // 7是（100+320+100）/75  =6.9333333  
    // 如果不是fixed合作和absolute的话就可以用这个getBoundingClientRect获取距离、
    const titleObj = h2TitleRef.current.getBoundingClientRect();
    const cardObj = cardRef && cardRef.current && cardRef.current.getBoundingClientRect();
    console.log(titleObj, 'titleObj', titleObj.bottom, cardObj, 'cardObj', cardObj && cardObj.bottom);
    //轮播图的高度+h2全部课程的高度
    if (scrollTop - 6.934 * rem > 0) {
      //卷去的高度减去 7 * rem 才是真正课程列表向上卷去的高度  ，一个卡片是8.67 * rem   (650/75=8.6667算的)
      // 就是列表向上卷曲的高度除以每张的高度向下取整*（防止是半张的时候）加5
      start = Math.floor((scrollTop - 6.934 * rem) / (8.67 * rem));
      console.log(scrollTop,'scrollTop',start, '卷去的高度减去  6.934 * rem 才是真正课程列表向上卷去的高度 一个卡片是8.67 * rem')
    }
    console.log("rem", rem);
    console.log("start", start);
  }

  console.log("start", start);
  return (
    <section className="lesson-list">
      <h2 ref={h2TitleRef}>
        <MenuOutlined /> 全部课程
          </h2>
      <Skeleton
        // Skeleton骨架屏，loading第一次获取数据说话用 
        loading={props.lessons && props.lessons.list.length == 0 && props.lessons.loading}
        active
        paragraph={{ rows: 8 }}
      >

        {props.lessons && props.lessons.list.map((lesson: Lesson, index: number) => {
          console.log("start", start, 'index', index, '判断');
          // (start < 5 && index <= 5) 刚开始默认渲染5张
          // 滚动超过后  index一定比start高。但是index必须小于 <start + 5
            // start<=index <start + 5
          return (start < 5 && index <= 5) || (index >= start && index < start + 5) ? (
            <Link
              key={index}
              to={{ pathname: `/detail/${lesson.id}`, state: lesson }}
              ref={cardRef}
            >
              <Card
                hoverable={true}
                style={{ width: "100%" }}
                cover={<img alt={lesson.title} src={lesson.poster} />}
                key={index}
              >
                <Card.Meta
                  title={lesson.title}
                  description={`价格: ¥${lesson.price}元`}
                />
              </Card>
            </Link>
          ) : (
              <div key={index} style={{ height: `${8.6666667 * rem}px` }}></div>
            )
        })
        }
        {
          props.lessons && props.lessons.hasMore ? (
            <Button
              onClick={props.getLessons}
              loading={props.lessons.loading}
              type="primary"
              block
            >
              {props.lessons.loading ? "" : "加载更多"}
            </Button>
          ) : (
              <Alert
                style={{ textAlign: "center" }}
                message="到底了"
                type="warning"
              />
            )
        }
      </Skeleton>
    </section>
  );
}

export default forwardRef(LessonList);



// <Skeleton loading={props.lessons.loading && props.lessons.list.length == 0} active paragraph={{ rows: 8 }}>
  // {/* 渲染成3个大div模块 ，第一个是上边的 */}
  // <div style={{ height: `${8.66667 * rem * start}px` }}></div>  
  // {/* index>=start&&index<==start+3  渲染条件，不是一块的时候*/}
  // {
  //   // 可视区域的  渲染的张数高度要大于满屏的高度，，，，
  //   props.lessons.list.slice(start, start + 5).map((item: Lesson, index: number) => (
  //     <Link key={item.id} to={{ pathname: `/detail/${item.id}`, state: item }}>
  //       {/* 卡片可以划 */}
  //       <Card
  //         hoverable={true}
  //         style={{ width: '100%' }}
  //         cover={<img alt={item.title} src={item.poster} />}
  //       >
  //         <Card.Meta title={item.title} description={`价格:¥${item.price}元`} />
  //       </Card>
  //     </Link>
  //   ))
  // }
  // {/*  // 下边的的 */}
  // <div style={{ height: `${8.66667 * rem * (props.lessons.list.length - start - 3)}px` }}></div>
// </Skeleton>